<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>报修</title>
    <script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/wuye/css/app.css" />
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/baoxiu.css">
    <!--标准mui.css-->
    <style type="text/css">
          .icon {
              width: 1em;
              height: 1em;
              vertical-align: -0.15em;
              fill: currentColor;
              overflow: hidden;
          }

        .z_file {
            width: 1rem;
            height: 1rem;
            background: url(__TMPL__/public/assets/images/z_add.png) no-repeat;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.2rem;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:window.history.go(-1);></a>
    <h1 class="mui-title">报修</h1>
    <a class="mui-icon  mui-pull-right" style="font-size: 16px;padding-top: 15px;" href="{:url('wuye/baoxiudan')}">报修单</a>
</header>
{:widget('Wuye/nav')}
<div class="mui-content">
    <div class="mui-card">
        {:widget('Wuye/info')}
    </div>
<form action="{:url('portal/wuye/baoxiuSave')}" method="post" enctype="multipart/form-data" class="mui-input-group">
    <div class="mui-input-row mui-select">
        <label style="width:40%;">选择报修问题</label>
        <select name="question_id" style="width:60%;padding-left: 2em;">
            <option value="0">报修问题</option>
            {:widget('Wuye/baoxiu', ['table' => 'wy_baoxiu_question'])}
        </select>
    </div>
    <div class="mui-input-row" style="margin: 10px 5px;height: 8em;">
        <textarea id="textarea" rows="10" placeholder="报修问题描述" name="desc"></textarea>
    </div>
    <div class="container mui-input-row" style="height: auto;">
        <label style="padding:0px;width: 100%;font-size: 12px;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tishi"></use></svg>上传图片,注：安卓只能一次上传一张，iPhone可以同时多张上传，点击已上传图片可以删除</label>
        <!--    照片添加    -->
        <div class="z_photo">
            <div class="z_file">
                <input type="file" name="image[]" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
            </div>
        </div>
        <!--遮罩层-->
        <div class="z_mask">
            <!--弹出框-->
            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
    </div>
    <div class="mui-button-row">
        <button class="mui-btn mui-btn-primary" type="submit"  style="width: 30%;">确认</button>
    </div>
</form>
</div>
<script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
<script type="text/javascript">
    //px转换为rem
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 640) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);

            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
        };
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        };
    };

</script>
</body>

</html>
